<template>
  <view class="tab-control">
    <template v-for="(item, index) in titles" :key="index">
			<view @click="handleItemClcik(index)" :class="['item', currentIndex === index ? 'active' : '']">
				<text class="title">{{item}}</text>
			</view>
		</template>
  </view>
</template>

<script setup>
	import { ref } from 'vue'
	
  const props = defineProps({
		titles: {
			type: Array,
			default: () => []
		}
	})
	
	const emit = defineEmits(['tabItemClick'])
	
	const currentIndex = ref(0)
	
	function handleItemClcik (index) {
		currentIndex.value = index
		emit('tabItemClick', index)
	}
</script>

<style lang="scss">
	.tab-control {
		@include normalFlex();
		margin-top: 10rpx;
		padding: 10rpx;
		text-align: center;
		
		.item {
			flex: 1;
			
			.title {
				display: inline-block;
				padding: 16rpx;
				border-bottom: 6rpx solid transparent;
			}
			
			&.active {
				.title {
					color: $gPrimaryColor;
					border-bottom: 6rpx solid $gPrimaryColor;
				}
			}
		}
	}
</style>
